<template>
  <div class="modify-password-container">
    <el-row class="account">账号:{{ info.username }}</el-row>
    <el-button
      class="button"
      type="primary"
      @click="modifyPassowrdDialogVisible = true"
      >修改密码</el-button
    >
    <el-dialog
      v-model="modifyPassowrdDialogVisible"
      title="修改密码"
      width="50%"
    >
      <el-form
        label-width="150px"
        ref="modifyPasswordFormRef"
        :model="modifyPasswordForm"
        :rules="modifyPasswordRules"
        class="login-form"
      >
        <el-form-item prop="password_old" label="原始密码">
          <el-input
            clearable
            v-model="modifyPasswordForm.password_old"
            placeholder="请输入原始密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="新密码">
          <el-input
            clearable
            v-model="modifyPasswordForm.password"
            placeholder="请输入新密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="password_confirm" label="确认密码">
          <el-input
            clearable
            v-model="modifyPasswordForm.password_confirm"
            placeholder="请输入确认密码"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeModifyPasswordDialog">取消</el-button>
          <el-button type="primary" @click="modifyPassword">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, toRaw } from "vue";
import { resetpwd } from "@/api/api";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElForm } from "element-plus";
import { State } from "@/store/type";
import { useModifyPassword } from "./useModifyPassword";
const store = useStore<State>();
const router = useRouter();
const info = computed(() => store.state.info);
const {
  modifyPasswordRules,
  modifyPasswordFormRef,
  modifyPasswordForm,
  closeModifyPasswordDialog,
  modifyPassowrdDialogVisible,
} = useModifyPassword();
//提交修改密码对话框
const modifyPassword = () => {
  modifyPasswordFormRef.value!.validate(async (valid: string) => {
    if (valid) {
      const {
        data: { code, message },
      } = await resetpwd(toRaw(modifyPasswordForm));
      if (code == 0) {
        modifyPassowrdDialogVisible.value = false;
        ElMessage({
          message: message,
          type: "success",
        });
        store.dispatch("logout");
        store.dispatch("changeAccountInfo", "");
        router.replace("/login");
      }
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};
</script>

<style lang="less" scoped>
.modify-password-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  flex: 1;
  box-sizing: border-box;
  .button {
    margin-top: 20px;
    //flex-direction: column时align-self默认为stretch撑满
    align-self: baseline;
  }
}
</style>
